import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'Counter',
  // 定义组件接收的props
  props: {
    initialValue: {
      type: Number,
      default: 0
    },
    step: {
      type: Number,
      default: 1
    }
  },
  setup(props) {
    // 响应式数据
    const count = ref(props.initialValue);
    
    // 方法定义
    const increment = () => {
      count.value += props.step;
    };
    
    const decrement = () => {
      count.value -= props.step;
    };
    
    const reset = () => {
      count.value = props.initialValue;
    };
    
    // JSX渲染函数
    return () => (
      <div style={{ 
        textAlign: 'center', 
        marginTop: '2rem',
        fontFamily: 'Arial, sans-serif'
      }}>
        <h1>Vue JSX Counter</h1>
        <p style={{ fontSize: '2rem', margin: '2rem 0' }}>{count.value}</p>
        <div style={{ display: 'flex', gap: '1rem', justifyContent: 'center' }}>
          <button 
            onClick={decrement}
            style={{ 
              padding: '0.5rem 1rem', 
              fontSize: '1rem',
              cursor: 'pointer'
            }}
          >
            -
          </button>
          <button 
            onClick={reset}
            style={{ 
              padding: '0.5rem 1rem', 
              fontSize: '1rem',
              cursor: 'pointer'
            }}
          >
            Reset
          </button>
          <button 
            onClick={increment}
            style={{ 
              padding: '0.5rem 1rem', 
              fontSize: '1rem',
              cursor: 'pointer'
            }}
          >
            +
          </button>
        </div>
        <p style={{ marginTop: '1rem', color: '#666' }}>
          步长: {props.step}
        </p>
      </div>
    );
  },
});